<template>
  <div>
    <page-dialog
      :title="dialogInfo.title"
      v-model:visible="shows"
      :width="dialogInfo.width"
      :bt-list="dialogInfo.btList"
    >
      <!--左右布局-->
      <div class="layui-row">
        <div class="layui-col-md6">
          <p style="height: 33px; line-height: 33px" class="slip-edit">
            账面流水
          </p>
          <dialog-table
            v-model:data="tableInfo.data"
            :field-list="tableInfo.fieldList"
            :pager="false"
            :listen-height="false"
            :check-box="false"
            :tab-index="true"
          >
          </dialog-table>
        </div>
        <div class="layui-col-md6" style="padding-left: 20px">
          <p style="height: 33px; line-height: 33px" class="slip-edit">
            实物流水
          </p>
          <dialog-table
            v-model:data="tableRightInfo.data"
            :check-box="false"
            :listen-height="false"
            :tab-index="true"
            :field-list="tableRightInfo.fieldList"
            :pager="false"
          >
          </dialog-table>
        </div>
      </div>
    </page-dialog>
  </div>
</template>

<script setup name="operateAffairDialog">
import { getAffirListStockInconformity } from '@/api/smartCabinet.js'
const { proxy } = getCurrentInstance()
const emits = defineEmits()
const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false,
  },
  rfidCode: {
    type: String,
  },
})
const shows = computed({
  get() {
    return props.showDialog
  },
  set(newValue) {
    emits('update:showDialog', newValue) // 更新父组件shows
  },
})

// 表格相关
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  api: null,
  data: [],
  fieldList: [
    { label: '操作时间', value: 'operateTime' },
    { label: '操作人', value: 'operateUserName' },
    {
      label: '操作类型',
      value: 'operateTypeValue',
    },
    {
      label: '操作单据号',
      value: 'orderNo',
    },
    {
      label: '操作前仓库',
      value: 'depotName',
    },
    {
      label: '操作后仓库',
      value: 'targetDepotName',
    },
  ],
})
const tableRightInfo = ref({
  data: [],
  fieldList: [
    { label: '操作时间', value: 'accessTime' },
    { label: '操作人', value: 'accessUserName' },
    {
      label: '操作类型',
      value: 'accessTypeValue',
    },
    {
      label: '操作单据号',
      value: 'orderNo',
    },
    {
      label: '仓库',
      value: 'smartCabinetDepotName',
    },
    {
      label: '数量',
      value: 'qty',
      type: 'column',
      formatter: proxy.$fn.qtyFormatter,
    },
    {
      label: '单价',
      value: 'price',
      formatter: proxy.$fn.TripartiteMethod,
      type: 'column',
    },
    {
      label: '智能柜编码',
      value: 'smartCabinetCode',
    },
    {
      label: '智能柜名称',
      value: 'smartCabinetName',
    },
  ],
})
// 弹窗相关
const dialogInfo = ref({
  title: '操作流水对比',
  width: '85%',
  btLoading: false,
  btList: [{ label: '关闭', event: handleClose, show: true }],
})

// 获取列表
function getList() {
  getAffirListStockInconformity(props.rfidCode).then((res) => {
    if (res && res.success && res.data) {
      tableInfo.value.data = res.data.depotAffair || []
      tableRightInfo.value.data = res.data.smartCabientAffair || []
    }
  })
}

// 关闭弹窗前的回调
function handleClose() {
  shows.value = false
  emits('reset')
}

onMounted(() => {
  // hack, 在table创建出来之后再去调用
  proxy.$nextTick(() => {
    getList()
  })
})
</script>

<style scoped></style>
